<template>
  <div class="m-about-us">
    <!-- 头部背景图 -->
    <div class="page-top">
      <img class="about-bg" :src="aboutBg" :alt="`${$t('platform')}`" />
      <div class="bg-desc">
        <div class="desc-item">
          <p>{{ $t("platform") }}</p>
          <span>{{ $t("platformDescription") }}</span>
        </div>
      </div>
    </div>
    <!-- 图片介绍区域 -->
    <div class="bg-one">
      <div class="one-dec">{{ $t("companyIntroduction") }}</div>
      <el-image class="one-img" :src="bg1" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
      <div class="one-img-list">
        <div class="item-img" v-for="(item, index) in bgTwoList" :key="index">
          <el-image :src="item" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
        </div>
      </div>
    </div>
    <!-- 为什么选择我们 -->
    <div class="bg-three">
      <div class="change-title">{{ $t("chooseUs") }}</div>
      <p class="dec-info">{{ $t("trustworthy") }}</p>
      <p class="dec-info">{{ $t("sanyOfficial") }}</p>
      <div class="info-center">
        <div class="center-item">
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/change-1.png" />
          <p class="info-t">{{ $t("machineryQuality") }}</p>
          <div class="info-b">
            <span>SANY</span>
            <span>{{ $t("officialCertified") }}</span>
          </div>
        </div>
        <div class="center-item">
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/change-2.png" />
          <p class="info-t">{{ $t("noWorry") }}</p>
          <p class="info-line">{{ $t("findingEquipment") }}</p>
          <div class="info-b">
            <span>1000+</span>
            <span>{{ $t("updateEquipment") }}</span>
          </div>
        </div>
        <div class="center-item">
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/change-3.png" />
          <p class="info-t">{{ $t("satisfied") }}</p>
          <div class="info-b">
            <span>5000+</span>
            <span>{{ $t("happyCustomers") }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 专业&效率 -->
    <div class="bg-four">
      <el-image class="img-b" :src="bg2" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
      <div class="tips">
        <span>{{ $t("pie") }}</span>
        <span>{{ $t("ourTeam") }}</span>
      </div>
    </div>
    <div class="bg-five">
      <div class="five-img" v-for="(item, index) in bgFiveList" :key="index">
        <el-image class="img-b" :src="item" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
      </div>
    </div>
    <!-- 客户来访 -->
    <div class="visitor-bg">
      <div class="region-title">
        <div class="region-tip"></div>
        <span>{{ $t("clientVisit") }}</span>
      </div>
      <div class="region-img">
        <div class="item-img" v-for="(item, index) in visitorList" :key="index">
          <el-image class="img-b" :src="item.img" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
          <p>{{ item.dec }}</p>
        </div>
      </div>
    </div>
    <!-- 销往全球 -->
    <div class="global-bg">
      <div class="region-title">
        <div class="region-tip"></div>
        <span>{{ $t("soldGlobally") }}</span>
      </div>
      <div class="title-info">{{ $t("covering") }}</div>
      <div class="info-img">
        <el-image class="img-b" :src="global1" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
        <p>{{ $t("2019-60") }}</p>
      </div>
      <div class="region-img">
        <div class="item-img" v-for="(item, index) in globalList" :key="index">
          <el-image class="img-b" :src="item.img" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
          <p>{{ item.dec }}</p>
        </div>
      </div>
    </div>
    <!-- 来电咨询 -->
    <div class="service-bg">
      <div class="service-title">{{ $t("expect") }}</div>
      <div class="service-phone">
        <span>+86 191 8699 3576</span>
        <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/right-small-red.png" />
      </div>
    </div>
    <!-- WhatsApp -->
    <!-- <WhatsAppM v-if="locale == 'en-US'" /> -->
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "M-aboutUs",
  layout: "mobile",
  components: {},
  data() {
    return {
      aboutBg: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/about-bg.png",
      bg1: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/m-two-1.png",
      bg2: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/bg-2.png",
      global1: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-1.png",
      two5: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-5.png",
      bgTwoList: [
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-3.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-4.png"
      ],
      bgFiveList: [
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-1.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-2.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-3.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-4.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-5.png",
        "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/five-6.png"
      ],
      visitorList: [
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-1.png" },
        { dec: this.$i18n.t("2023-clients"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-2.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-3.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-4.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-5.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-6.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-7.png" },
        { dec: this.$i18n.t("2023-mongolia"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/visitor-8.png" }
      ],
      globalList: [
        { dec: this.$i18n.t("2021-50"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-2.png" },
        { dec: this.$i18n.t("2020-8018"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-3.png" },
        { dec: this.$i18n.t("2019-285"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-4.png" },
        { dec: this.$i18n.t("2011-46"), img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/global-5.png" }
      ]
    }
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        }
      ]
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.getPoint()
  },
  methods: {
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.m-about-us {
  padding-bottom: 300px;
  .page-top {
    width: 100%;
    height: 100%;
    position: relative;
    .about-bg {
      width: 100%;
      height: 1024px;
    }
    .bg-desc {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .desc-item {
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          width: 98%;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 113px;
          color: #fff;
          line-height: 113px;
          text-align: center;
        }
        span {
          text-align: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 61px;
          color: #fff;
          line-height: 72px;
          margin-top: 26px;
        }
      }
    }
  }
  .bg-one {
    padding: 77px;
    box-sizing: border-box;
    .one-dec {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 61px;
      color: #333;
      line-height: 92px;
    }
    .one-img {
      width: 100%;
      height: 922px;
      margin-top: 102px;
    }
    .one-img-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 51px;
      .item-img {
        width: 49%;
      }
    }
  }
  .bg-three {
    height: 100%;
    background: linear-gradient(180deg, #ff6c55 0%, #ffc757 100%);
    padding: 77px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .change-title {
      width: 778px;
      height: 154px;
      line-height: 154px;
      text-align: center;
      background: #fff;
      border-radius: 154px;
      font-family: AlibabaPuHuiTiB;
      font-size: 92px;
      color: #ff7656;
      margin-bottom: 26px;
    }
    .dec-info {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 50px;
      color: #fff;
      line-height: 77px;
      text-align: center;
    }
    .info-center {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 26px;
      .center-item {
        width: 565px;
        height: 635px;
        border-radius: 30px;
        border: 5px solid #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 205px;
          height: 205px;
          margin-top: 40px;
        }
        .info-t {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 50px;
          color: #fff;
          line-height: 50px;
          text-align: center;
          margin-top: 40px;
        }
        .info-line {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 50px;
          color: #fff;
          line-height: 50px;
          text-align: center;
          margin-top: 20px;
        }
        .info-b {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 50px;
          span {
            width: 100%;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 50px;
            color: #fff;
            line-height: 60px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .bg-four {
    position: relative;
    .tips {
      width: 100%;
      height: 250px;
      background: #d71519;
      position: absolute;
      left: 0;
      top: 90px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #fff;
        &:nth-child(1) {
          font-size: 80px;
          line-height: 80px;
        }
        &:nth-child(2) {
          font-size: 40px;
          line-height: 40px;
          margin-top: 30px;
        }
      }
    }
  }
  .bg-five {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .five-img {
      width: 49.5%;
      height: 600px;
    }
  }
  .visitor-bg {
    margin-top: 102px;
    .region-title {
      display: flex;
      align-items: center;
      justify-content: center;
      .region-tip {
        width: 40px;
        height: 92px;
        background: #d71519;
      }
      span {
        font-family: AlibabaPuHuiTiM;
        font-size: 92px;
        color: #333;
        line-height: 102px;
        margin-left: 30px;
      }
    }
    .region-img {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 77px;
      box-sizing: border-box;
      .item-img {
        width: 48%;
        margin-top: 50px;
        p {
          height: 205px;
          text-align: center;
          background: #f6f7f9;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 50px;
          color: #333;
          line-height: 60px;
          border-radius: 0 0 30px 30px;
          padding: 30px;
          box-sizing: border-box;
        }
      }
    }
  }
  .global-bg {
    margin-top: 102px;
    .region-title {
      display: flex;
      align-items: center;
      justify-content: center;
      .region-tip {
        width: 40px;
        height: 92px;
        background: #d71519;
      }
      span {
        font-family: AlibabaPuHuiTiM;
        font-size: 92px;
        color: #333;
        line-height: 102px;
        margin-left: 30px;
      }
    }
    .title-info {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 51px;
      color: #333;
      line-height: 77px;
      text-align: center;
      margin-top: 26px;
      margin-bottom: 77px;
    }
    .info-img {
      position: relative;
      p {
        width: 100%;
        height: 256px;
        line-height: 256px;
        text-align: center;
        background: rgba(0, 0, 0, 0.6);
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 92px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .region-img {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item-img {
        width: 49.5%;
        position: relative;
        p {
          width: 100%;
          height: 143px;
          line-height: 143px;
          text-align: center;
          background: rgba(0, 0, 0, 0.6);
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 50px;
          color: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
    }
  }
  .service-bg {
    width: 100%;
    height: 727px;
    background: #d71519;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .service-title {
      font-family: AlibabaPuHuiTiM;
      font-size: 92px;
      color: #fff;
      line-height: 102px;
    }
    .service-phone {
      width: 1024px;
      height: 205px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 215px;
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 72px;
        color: #d71519;
      }
      img {
        width: 30px;
        height: 60px;
        margin-left: 10px;
      }
    }
  }
  .img-b {
    display: block;
  }
}
</style>
